<template>
  <div class="six-services">
    <ul class="services">
      <li @mouseenter="enterService(index)" @mouseleave="leaveService(index)" v-for="(item,index) in services"
          :key="index"
          class="service">
        <svg ref="icon" class="icon" aria-hidden="true">
          <use :xlink:href="symbol[index]"></use>
        </svg>
        <a ref="title" class="title" :href="item.href">{{ item.title }}</a>
      </li>
    </ul>
    
    <promotional></promotional>
  </div>
</template>

<script>
import '@/assets/font/services/services'
import promotional from '@/components/Mi/Promotional'

export default {
  components: {
    promotional,
  },
  name: "Services",
  data() {
    return {
      services: [],
      symbol: [
        '#icon-shouji',
        '#icon-huodong',
        '#icon-shuaxin',
        '#icon-yinhangqia',
        '#icon-ai49',
        '#icon-sim-full'
      ],
    }
  },
  created() {
    this.getSixServices()
  },
  methods: {
    async getSixServices() {
      const {data: res} = await this.$http.get('services')
      this.services = res.sixServices
    },
    enterService(index) {//修改元素样式（进入时）
      let changeTargetEnterIcon = this.$refs.icon[index]
      let changeTargetEnterTitle = this.$refs.title[index]
      changeTargetEnterIcon.setAttribute('class', 'icon-enter')
      changeTargetEnterTitle.setAttribute('class', 'title-enter')
    },
    leaveService(index) {//修改元素样式（离开时）
      let changeTargetLeaverIcon = this.$refs.icon[index]
      let changeTargetLeaverTitle = this.$refs.title[index]
      changeTargetLeaverIcon.setAttribute('class', 'icon')
      changeTargetLeaverTitle.setAttribute('class', 'title')
    },
  },
}
</script>

<style scoped lang="less">
.six-services {
  height: 170px;
  width: 1226px;
  display: flex;
  margin-top: 15px;
  
  .services {
    height: 100%;
    min-width: 230px;
    width: 230px;
    display: flex;
    flex-wrap: wrap;
    background-color: #5E5751;
    margin-right: 15px;
    
    .service {
      height: 85px;
      width: 76.6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      border: 0.5px solid #6E6863;
      cursor: pointer;
      
      .icon {
        color: #CFCDCB;
      }
      
      .icon-enter {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        color: #ffffff;
      }
      
      .title {
        margin-top: 10px;
        font-size: 14px;
        color: #CFCDCB;
      }
      
      .title-enter {
        margin-top: 10px;
        font-size: 14px;
        color: #ffffff;
      }
      
    }
  }
}
</style>
